<template>
	<u-popup :show="visible" round="16rpx" mode="bottom" @close="hide">
		<view class="quick-group-remove-member">
			<view class="quick-group-remove-member__head">
				<text>{{title||'管理成员'}}</text>
				<view class="quick-group-remove-member__head-close bg-hover" @tap="hide">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/static/img/tips／close@2x_1681978220794.png"></u-image>
				</view>
			</view>

			<scroll-view class="quick-group-remove-member__content" scroll-y @scrolltolower="scrolltolower">
				<view>
					<view class="quick-group-remove-member__content-module bg-hover" v-for="(item,index) in items" :key="index"
						@tap="itemToDetail(item,index)">
						<u-avatar
							:src="item.icon||'https://file.casugn.com/storecompcard//GFnT1GaT8CD9089ddbabd7d7c2180f52b649e7945ba7_1661907569321.png'"
							size="64rpx"></u-avatar>
						<view class="quick-group-remove-member__content-module-name">
							<text>{{item.name||'[[未填写姓名]]'}}</text>
							<text v-if="item.profile">{{item.profile}}</text>
						</view>
						<template v-if="!item.loading">
							<view v-if="showRemove&&item.roleIdentify!==0" class="quick-group-remove-member__content-module-btn"
								@tap.stop.prevent="deleteHandle(item,index)">
								<u-icon name="trash-fill" color="#ff0000" size="40"></u-icon>
							</view>
						</template>
						<u-loading-icon v-else size="28rpx"></u-loading-icon>
					</view>

					<template v-if="loadMoreStatus!=='loading'&&!items.length">
						<u-empty marginTop="30rpx" width="240rpx" height="240rpx" text="暂时没有成员" textSize="28rpx" textColor="#86909C"
							icon="https://file.casugn.com/storecompcard/temp/空页面@2x(11)_1681113828976.png"></u-empty>
					</template>

					<template v-if="loadMoreStatus==='loading'">
						<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus"
							@loadmore="scrolltolower" />
					</template>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		props: {
			// 显示删除按钮
			showRemove: {
				type: Boolean,
				default: true
			}
		},
		data() {

			return {
				visible: false,
				title: '',
				groupId: '',

				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		computed: {
			...mapGetters(['openId']),
		},
		methods: {
			show(record) {
				console.log(record);
				this.visible = true
				this.title = record.title
				this.groupId = record.groupId

				this.loadMoreStatus = 'loading'
				this.pageNo = 1
				this.getDBData()
			},
			hide() {
				this.visible = false
			},
			itemToDetail(item) {
				uni.showLoading({ mask: true, title: '加载中' })
				this.getMemberInfo(item.openId)
			},
			deleteHandle(item, index) {
				const that = this
				uni.showModal({
					title: '提示',
					content: `确认删除成员[${item.name||'[未填写姓名]'}]`,
					success: async (e) => {
						if (e.confirm) {
							that.$set(item, 'loading', true)
							let res = await that.$api.leaveQuickGroup(that.groupId, that.openId, item.openId)
							if (res.success) {
								uni.showToast({ title: '删除成功！', icon: 'none' })
								that.$set(item, 'loading', false)
								that.items.splice(index, 1)
							} else {
								uni.showToast({ title: res.message || '删除失败！', icon: 'none' })
								that.$set(item, 'loading', false)
							}
						} else if (e.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async getMemberInfo(openId) {
				let res = await this.$api.queryCurrentCardByOpenId({ openId })
				if (res.success) {
					uni.hideLoading()
					uni.navigateTo({
						url: `/pagesCard/friendMainPage/friendMainPage?cardId=${res.result.id}&openId=${res.result.openId}&unionId=${res.result.unionId}&fromQuick=true`
					})
				} else {
					uni.showToast({ title: '该好友尚未创建名片', icon: 'none' })
				}
			},
			async getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					groupId: this.groupId,
					isDel: 0,
					column: 'name',
					order: 'desc',
				}
				let res = await this.$api.getQuickGruopMemberList(params)
				if (res.success) {
					let tData = res.result.records
					if (type === 'refresh') {
						this.items = tData
					}
					if (type === 'add') {
						this.items.push(...tData)
					}
					console.log('人员列表：', this.items);
					this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.quick-group-remove-member {
		position: relative;
		height: 60vh;

		.quick-group-remove-member__head {
			position: relative;
			height: 92rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 44rpx;
			background-color: #fff;

			display: flex;
			justify-content: center;
			align-items: center;

			.quick-group-remove-member__head-close {
				position: absolute;
				top: 30rpx;
				right: 32rpx;
			}
		}

		.quick-group-remove-member__content {
			position: relative;
			height: calc(100% - 92rpx);
			padding: 24rpx 32rpx;
			background-color: #F7F8FA;
			box-sizing: border-box;

			.quick-group-remove-member__content-module {
				padding: 24rpx;
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 8rpx;

				display: flex;
				align-items: center;

				&:nth-child(n+2) {
					margin-top: 24rpx;
				}

				.quick-group-remove-member__content-module-name {
					padding: 0 20rpx;

					display: flex;
					flex-direction: column;

					text:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 44rpx;
					}

					text:nth-child(2) {
						margin-top: 10rpx;
						font-size: 22rpx;
						color: #999;
						line-height: 30rpx;
					}
				}

				.quick-group-remove-member__content-module-btn {
					margin-left: auto;
				}
			}
		}
	}
</style>